<style rel="stylesheet/scss" lang="scss" scoped>
@import "../../../styles/prod.scss";
.mid {
  line-height: 140px;
}
</style>
<template>
  <div class="app-container calendar-list-container">
    <!-- 基本属性 -->
    <div class="pds-tip-green">
      <p>
        查看证书
      </p>
    </div>
    <template>
      <show-detail :basicInfo="basicForm" :detail="detail" ref="basicForm" :lang="language"></show-detail>
    </template>
    <custom-card title="包含产品" class="mt-30">
      <template>
        <el-table align="center" border fit highlight-current-row style="width: 100%" :data="detail.pdsCertProductsList">
          <el-table-column type="index"></el-table-column>
          <!-- <el-table-column align="center" label="项目编号" prop="projectNo"></el-table-column> -->
          <el-table-column align="center" label="产品类型" prop="productCategory"></el-table-column>
          <el-table-column align="center" label="产品型号" prop="plmModelNo"></el-table-column>
          <el-table-column align="center" label="使用标准">
            <template slot-scope="scope">
              <!-- <el-select v-model="scope.row.certStandardId" placeholder="请选择">
                <el-option v-for="item in standardList" :key="item.id" :value="item.id" :label="item.name">
                </el-option>
              </el-select> -->
              {{getValue(standardList,'id','name',scope.row.certStandardId)}}
            </template>
          </el-table-column>
        </el-table>
      </template>
    </custom-card>
    <custom-card title="证书文档" class="mt-30">
      <template>
        <el-table :data="detail.pdsCertFileList" border fit highlight-current-row style="width: 100%">
          <el-table-column align="center" label="文件名称" prop="fileName"></el-table-column>
          <!-- <el-table-column align="center" label="文件类型" prop="fileType"></el-table-column> -->
          <el-table-column align="center" label="文件大小">
            <template slot-scope="scope">
              {{scope.row.fileSize | showSize}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="上传日期" prop="createTime"></el-table-column>
          <el-table-column align="center" label="备注">
            <template slot-scope="scope">
              {{scope.row.remark}}
            </template>
          </el-table-column>
          <el-table-column align="center" label="操作">
            <template>
              <el-button @click="downloadFile">下载</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </custom-card>
    <custom-card title="报告" class="mt-30">
      <template>
        <el-table :data="detail.pdsCertReportsDTOList" border fit highlight-current-row style="width: 100%">
          <el-table-column type="index"></el-table-column>
          <el-table-column align="center" label="报告编号" prop="certReportNo"></el-table-column>
          <el-table-column align="center" label="使用标准" prop="certStandard"></el-table-column>
          <el-table-column align="center" label="报告有效期" prop="certReportEffectiveDate"></el-table-column>
          <el-table-column align="center" label="操作" prop="">
            <template slot-scope="scope">
              <el-button @click="editReport(scope.$index)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </template>
    </custom-card>

    <!-- 报告弹窗 -->
    <el-dialog title="报告详情" :visible.sync="reportDialog" width="80%">
      <el-form label-width="120px" label-suffix="：" :model="reportForm" ref="reportForm">
        <el-row>
          <el-col :span="8">
            <el-form-item label="报告编号" prop="certReportNo">
              {{reportForm.certReportNo}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报告有效期" prop="certReportEffectiveDate">
              {{reportForm.certReportEffectiveDate}}
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="预警阈值" prop="warningDay">
              {{reportForm.warningDay}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="使用标准" prop="certStandardId">
              {{getValue(standardList, 'id', 'name', reportForm.certStandardId)}}
            </el-form-item>
          </el-col>
          <el-col :span="16">
            <el-form-item label="相关参数" prop="params">
              {{reportForm.params}}
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="备注">
          {{reportForm.remark}}
        </el-form-item>
      </el-form>
      <upload-list v-if="reportDialog" :disable="true" uploadFileId="upload-file" type="eipFile" btnText="上传报告文档" v-model="reportForm.pdsCertReportFileList"></upload-list>

      <custom-card title="CDF" class="mt-30">
        <template>
          <el-table :data="reportForm.pdsCertCdfsDTOList" border fit highlight-current-row style="width: 100%">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column align="center" label="备注" prop="remark"></el-table-column>
            <el-table-column align="center" label="操作" prop="">
              <template slot-scope="scope">
                <el-button @click="editCdf(scope.$index)">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </custom-card>
    </el-dialog>

    <!-- cdf弹窗 -->
    <el-dialog title="CDF详情" :visible.sync="cdfDialog" width="80%">
      <el-form label-width="120px" label-suffix="：" :model="cdfForm">
        <el-form-item label="报告编号">
          {{reportForm.certReportNo}}
        </el-form-item>
        <el-form-item label="备注">
          {{cdfForm.remark}}
        </el-form-item>
      </el-form>
      <upload-list v-if="cdfDialog" :disable="true" uploadFileId="upload-file" type="eipFile" btnText="上传文档" v-model="cdfForm.pdsCertCdfFilesList"></upload-list>
    </el-dialog>

  </div>
</template>
<script>
import {
  mapGetters
} from 'vuex';
import * as baseApi from '@/api/common/index'
import * as prodApi from '@/api/product/index'
import * as certApi from '@/api/cert/index'
import * as listApi from '@/api/cert/list/index'
import ShowDetail from '@/components/BasicForm/ShowDetail'
import CustomCard from '@/components/CustomCard/index'
import UploadList from '@/components/UploadList'
export default {
  name: 'user',
  components: {
    ShowDetail,
    CustomCard,
    UploadList
  },
  data() {
    return {
      loading: false,
      isUpdate: false,
      baseUrl: process.env.BASE_FILE_URL,
      detail: {
        pdsCertProductsList: [],
        pdsCertFileList: [],
        pdsCertReportsDTOList: []
      },
      basicForm: [
        {
          label: '证书项目号',
          unit: '',
          element: 'input',
          name: 'certProjectNo',
          type: '',
          isRequired: true
        }, {
          label: '证书编号',
          unit: '',
          element: 'input',
          name: 'certNo',
          type: '',
          isRequired: true
        }, {
          label: '证书种类',
          element: 'select',
          name: 'certCategoryId',
          value: 'id',
          labelName: 'name',
          isRequired: true
        }, {
          label: '认证地区',
          unit: '',
          element: 'select',
          name: 'certArea',
          type: '',
          isRequired: true
        }, {
          label: '认证机构',
          unit: '',
          element: 'input',
          name: 'certOrg',
          type: '',
          isRequired: true
        }, {
          label: '生产厂家',
          unit: '',
          element: 'input',
          name: 'certManufacturer',
          type: '',
          isRequired: true
        }, {
          label: '持证单位',
          unit: '',
          element: 'select',
          name: 'certLicensedUnitId',
          type: '',
          value: 'id',
          labelName: 'name',
          isRequired: true
        }, {
          label: '证书有效期',
          unit: '',
          element: 'datePicker',
          name: 'certEffectiveDate',
          type: '',
          isRequired: true
        }, {
          label: '预警阈值',
          unit: '',
          element: 'input',
          name: 'warningDay',
          isRequired: true
        }
      ],
      proNoList: [],
      standardList: [],
      reportForm: {},
      cdfList: [],
      reportDialog: false,
      cdfDialog: false,
      cdfForm: {}
    }
  },
  created() {
    this.getDict()
  },
  activated() {
    this.getDetail();
  },
  computed: {
    ...mapGetters([
      'elements',
      'language'
    ])
  },
  methods: {
    // 获取字典选项
    getDict() {
      /* 证书种类 */
      listApi.gories().then(res => {
        this.basicForm[2].options = res.data;
      })
      /* 认证地区 */
      baseApi.getTypeValue('cert_area').then(res => {
        this.basicForm[3].options = res.data.rows
      })
      /* 持证单位 */
      prodApi.unitList().then(res => {
        this.basicForm[6].options = res.data;
      })
      /* 项目编号 */
      listApi.getProjectNos().then(res => {
        this.proNoList = res.data;
      })
      certApi.getStandards().then(res => {
        this.standardList = res.data;
      })
    },
    /* 获取详情 */
    getDetail() {
      listApi.getCertDetail(this.$route.query.id).then(res => {
        if (res.code == 200) {
          this.detail = res.data.pdsCert;
          this.detail.pdsCertFileList = res.data.pdsCertFileList;
          this.detail.pdsCertReportsDTOList = res.data.pdsCertReportsDTOList;
          listApi.getCertProducts({ certId: this.detail.id }).then(res => {
            this.$set(this.detail, 'pdsCertProductsList', res.data)
          })
        }
      })
    },
    /* 单选值查询 */
    getValue(list, keyName, valueName, value) {
      let resStr = '';
      if (list) {
        list.map(item => {
          if (item[keyName] == value) {
            resStr = item[valueName];
          }
        })
      }
      return resStr;
    },
    /* 下载文档 */
    downloadFile() {
      window.open(this.baseUrl + '/' + this.detail.pdsCertFileList[0].fileUrl)
    },
    /* 编辑报告 */
    editReport(index) {
      this.reportForm = JSON.parse(JSON.stringify(this.detail.pdsCertReportsDTOList[index]));
      this.reportForm.index = index;
      this.reportDialog = true;
    },
    /* 编辑CDF */
    editCdf(index) {
      this.cdfForm = JSON.parse(JSON.stringify(this.reportForm.pdsCertCdfsDTOList[index]));
      this.cdfForm.index = index;
      this.cdfDialog = true;
    }
  }
}
</script>
